<template>
	<view class="my-information">
		 <navigator class="back-arrow" url="/pages/my/my">
		      <view class="arrow"></view>
		  </navigator> 
	    <text class="title">个人信息</text>
	</view>
	
	
	<view class="info-item">
	  <text class="info-label">头像</text>
	  <navigator class="info-content arrow-avatar" url="/packageMy/myInformation/avatarUpdate/avatarUpdate">
	    <image class="avatar-img" src="https://image.9xsecndns.cn/image/uicon/b6d28854a59dcbea523782aad246b99ab1785bd265c5dd.png" mode=""/>
	    <text class="arrow-icon"></text>
	  </navigator>
	</view>
	
	<view class="info-item">
	  <text class="info-label">姓名</text>
	  <text class="info-content">殷南昭</text>
	</view>
	
	<view class="info-item">
	  <text class="info-label">手机号</text>
	  <navigator class="info-content arrow-phone" url="/packageMy/myInformation/phoneUpdate/phoneUpdate">
	    <text>12345678912</text>
	    <text class="arrow-icon"></text>
	  </navigator>
	</view>

	
</template>

<script setup>
	
</script>

<style>
	     
		  /* 个人信息标题部分 */
		  .my-information {
		    display: flex;
		    justify-content: center;
		    align-items: center; /* 调整对齐方式，让内容靠近顶部 */
		    height: 10vh;
		    background-color: #F8F8F8;			
		  }
		  
		  .back-arrow {
		    position: relative;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    cursor: pointer;
		    left: -250rpx;
		  }
		  
		  .arrow {
		    width: 20rpx;
		    height: 20rpx;
		    border-top: 4rpx solid black;
		    border-right: 4rpx solid black;
		    transform: rotate(-135deg);
		    margin-top: 2vh;
		  }
		  
		  .title {
		    font-size: 40rpx;
		    font-weight: normal;
		    color: black;
		    margin-top: 2vh /* 向上移动标题，减少底部空间 */
		  }
		  
		  /* 个人信息每一项 */
		  .info-item {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding: 24rpx 32rpx;
		    border-bottom: 2rpx solid #eee;
		    background-color: #fff;
		  }
		  
		  /* 左侧标签 */
		  .info-label {
		    font-size: 32rpx;
		    color: #333;
		  }
		  
		  /* 右侧内容 */
		  .info-content {
		    display: flex;
		    align-items: center;
		    font-size: 32rpx;
		    color: #666;
		  }
		  
		  /* 头像样式 */
		  .avatar-img {
		    width: 80rpx;
		    height: 80rpx;
		    border-radius: 50%;
		    margin-right: 20rpx;
		  }
		  
		  /* 统一箭头样式 */
		  .arrow-icon {
		    width: 16rpx;
		    height: 16rpx;
		    border-top: 4rpx solid #999;
		    border-right: 4rpx solid #999;
		    transform: rotate(45deg);
		    margin-left: 20rpx;
		  }


		   
</style>
